<template>
  <!-- 资源组件 -->
  <div
    style="border: 1px solid #abcdef;padding: 20px;min-width: 250px;width: 100%;box-sizing: border-box;margin-top: 20px;"
    ref="resourceComp"
  >
    <!-- 显示选择的内容 -->
    <div
      class="showOptionContent"
      style="margin: 5px 5px 20px 5px;display: flex;width: 100%;flex-wrap: wrap"
    >
      <el-form
        :model="resourceCompForm"
        ref="resourceCompForm"
        label-width="150px"
        class="demo-dynamic"
        label-position="top"
        style="width: 100%"
      >
        <el-form-item label="请选择资源" :rules="rulesResource" prop="optionState">
          <!-- v-model="resourceCompForm.optionState" v-model="resourceCompForm.resources" pointResourceOption.val-->
          <div v-if="transmitName==='imgText'">
            <el-select
              clearable
              filterable
              multiple
              remote
              v-model="pointResourceOption.val"
              placeholder="请选择"
              style="width: 100%;"
              @change="resourceChange"
              v-loadmore="loadmore"
              value-key="id"
              :remote-method="(query) => remoteMethod(query)"
              @visible-change="(bl) => visibleChange(bl)"
            >
              <!-- serverData -->
              <div v-if="pointResourceOption.nowQuery">
                <el-option
                  v-for="(item) in pointResourceOption.searchArr"
                  :key="item.id"
                  :label="item.title"
                  :value="item"
                  :disabled="item.disabled"
                ></el-option>
              </div>
              <div v-else>
                <el-option
                  v-for="(item) in pointResourceOption.data"
                  :key="item.id"
                  :label="item.title"
                  :value="item"
                  :disabled="item.disabled"
                ></el-option>
              </div>
            </el-select>
          </div>
          <div v-else>
            <el-select
              clearable
              filterable
              multiple
              remote
              v-model="resourceCompForm.resources"
              placeholder="请选择"
              style="width: 100%;"
              @change="resourceChange"
              v-loadmore="loadmore"
              value-key="id"
              :remote-method="(query) => remoteMethod(query)"
              @visible-change="(bl) => visibleChange(bl)"
              :disabled="mainOption.operate==='show'?true:false"
            >
              <!-- serverData -->
              <div v-if="pointResourceOption.nowQuery">
                <el-option
                  v-for="(item) in pointResourceOption.searchArr"
                  :key="item.id"
                  :label="item.title"
                  :value="item"
                  :disabled="item.disabled"
                ></el-option>
              </div>
              <div v-else>
                <el-option
                  v-for="(item) in pointResourceOption.data"
                  :key="item.id"
                  :label="item.title"
                  :value="item"
                  :disabled="item.disabled"
                ></el-option>
              </div>
            </el-select>
          </div>
        </el-form-item>
      </el-form>
      <div v-if="transmitName==='imgText'" style="width: 100%;display: flex;flex-wrap: wrap;">
        <div
          style="margin: 10px 8px;width: 150px;position: relative;"
          v-for="(item, index) in pointResourceOption.val"
          :key="index"
        >
          <el-card :body-style="{ padding: '0px' }">
            <el-image :src="item.thumb"></el-image>
            <div style="padding: 14px;">
              <div>{{item.title}}</div>
            </div>
          </el-card>
          <el-popover placement="top" width="160" v-model="item.IsDel" v-show="mainOption.operate === 'show'?false:true">
            <p>确定删除内容吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="item.IsDel = false">取消</el-button>
              <el-button type="primary" size="mini" @click="contentBoxClose(index, item.id)">确定</el-button>
            </div>
            <span
              slot="reference"
              class="el-icon-error"
              style="position: absolute;top: 0px;right: 0px;color: salmon;font-size: 20px;transform: translateX(30%) translateY(-30%)"
            ></span>
          </el-popover>
        </div>
      </div>
      <div v-else style="width: 100%;display: flex;flex-wrap: wrap;">
        <div
          style="margin: 10px 8px;width: 150px;position: relative;"
          v-for="(item, index) in resourceCompForm.resources"
          :key="index"
        >
          <el-card :body-style="{ padding: '0px' }">
            <el-image :src="item.thumb"></el-image>
            <div style="padding: 14px;">
              <div>{{item.title}}</div>
            </div>
          </el-card>
          <el-popover placement="top" width="160" v-model="item.IsDel" v-show="mainOption.operate === 'show'?false:true">
            <p>确定删除内容吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="item.IsDel = false">取消</el-button>
              <el-button type="primary" size="mini" @click="contentBoxClose(index, item.id)">确定</el-button>
            </div>
            <span
              slot="reference"
              class="el-icon-error"
              style="position: absolute;top: 0px;right: 0px;color: salmon;font-size: 20px;transform: translateX(30%) translateY(-30%)"
            ></span>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
module.exports = {
  props: {
    mainOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dayIndex: {
      type: Number,
      default: 0
    },
    pointIndex: {
      type: Number,
      default: 0
    },
    transmitName: "",
    pointResourceOption: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rulesResource: {
      type: Array,
      default: () => {
        return [];
      }
    },
    keyStr: {
      type: Number,
      default: 0
    },
    appendToBody: {
      type: Boolean,
      defaule: false
    },
    serverData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    resourceCompForm: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  created() {
    // console.log(this.resourceCompForm, "resourceCompForm");
  },
  methods: {
    visibleChange(bl) {
      if (!bl) {
        this.pointResourceOption.nowQuery = "";
      }
    },
    remoteMethod(query) {
      const transmitName = this.transmitName;
      const dayIndex = this.dayIndex;
      const pointIndex = this.pointIndex;
      dispatch(this, "LsApp", "remote-method", {
        query,
        name: "name",
        transmitName,
        dayIndex,
        pointIndex
      });
    },
    loadmore() {
      // this.$emit("scroll-more", "pointResouceList");
      dispatch(this, "LsApp", "scroll-more");
    },
    spanClose(item) {
      item.IsDel = true;
      console.log(item, "item spanClose");
    },
    unique(arr) {
      const res = new Map();
      return arr.filter(arr => !res.has(arr.id) && res.set(arr.id, 1));
    },
    resourceCompSubmit() {
      let arr = [];
      let that = this;
      return allCheckRules(that, "resourceCompForm");
    },
    resourceChange(changeArr) {
      this.pointResourceOption.data = this.unique(
        this.pointResourceOption.data.concat(changeArr)
      );
      this.$emit("transmit-change-arr", changeArr);
    },
    // 删除
    contentBoxClose(index, id) {
      // console.log("contentBoxClose");
      // this.resourceCompForm.optionState[index].IsDel = true;
      // this.serverData.map((item, index) => {
      //   if (item.id == id) {
      //     item.disabled = false;
      //   }
      // });
      // this.resourceCompForm.optionState.splice(index, 1);
      // this.$emit("transmit-change-arr", this.resourceCompForm.optionState);
      this.resourceCompForm.resources[index].IsDel = true;
      this.serverData.map((item, index) => {
        if (item.id == id) {
          item.disabled = false;
        }
      });
      this.resourceCompForm.resources.splice(index, 1);
      this.$emit("transmit-change-arr", this.resourceCompForm.resources);
    }
  }
};
</script>
<style scoped>
</style>